<template>
    <a-layout id="layout-root">
        <XSider :collapsed="collapsed" :theme="theme" :width="width" :SiteSeoConfig="SiteSeoConfig"/>
        <a-layout>
            <a-layout-header style="background: #fff;  padding: 0;text-align: left;">


                <a-row>
                    <a-col :span="12">

                        <a-tooltip class="trigger">

                            <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                                    @click="() => (collapsed = !collapsed)"/>
                        </a-tooltip>

                    </a-col>


                    <a-col :span="12"><XHeader/></a-col>
                </a-row>
            </a-layout-header>
            <a-layout-content class="layout-content">


                <router-view v-if="show"/>
                <a-spin  v-else size="large"  tip="Loading...">
                    <div class="spin-content"></div>
                </a-spin>

            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>

import {getWebConfig} from '../util/open.api';

export default {
    components: {
        XSider: ()=>import('../layout/XSider'),
        XHeader: ()=>import('../layout/XHeader'),

    },
    data() {
        return {
            width: 240,
            theme: 'dark',
            collapsed: false,
            SiteSeoConfig: {},
            show:true,

        };
    },
    methods: {
        //读取系统配置
        async init() {
            await getWebConfig("adminVersion").then(res => {
                this.SiteSeoConfig = res;
                document.title = res.siteName + "-" + res.siteLongName;
            });
        },

    },

    computed: {
        needReload() {
            return this.$store.state.reload;
        }
    },
    created() {
        this.init();
    },
    watch: {
        needReload(curVal, oldVal) {
           this.show = !curVal;
        }

    }
};
</script>
<style scoped>
    .trigger {
        line-height: 64px;
        padding: 0 1rem;
        cursor: pointer;
        transition: color 0.3s;
    }

    .trigger:hover {
        color: #1890FF;
    }

    .layout-content {
        margin: 16px 8px;
        min-height: 280px;
    }



    .spin-content {
        width: 100%;
        height: 100%;
        background-color: #e6f7ff;
        padding: 40%;
    }
</style>
